<!--<template>-->
<!--  <div class="login-container">-->
<!--    <div class="login-image">-->
<!--      <img-->
<!--          alt="登录页装饰图"-->
<!--          class="decorative-img"-->
<!--          src="https://img.shetu66.com/2022/08/cutCoverImg/1663065835196923.png"/>-->
<!--    </div>-->
<!--    <div class="login-form-wrapper">-->
<!--      <div class="logo">-->
<!--        <el-icon class="icon" color="#ff7d00">-->
<!--          <Shop/>-->
<!--        </el-icon>-->
<!--        <span class="title">二手交易网</span>-->
<!--      </div>-->
<!--      <el-card class="login-card">-->
<!--        <div class="tab-container">-->
<!--          <el-tabs v-model="activeTab" class="login-tabs">-->
<!--            <el-tab-pane label="登录" name="login"/>-->
<!--            <el-tab-pane label="注册" name="register"/>-->
<!--          </el-tabs>-->
<!--        </div>-->

<!--        <el-form ref="formRef" :model="form" :rules="rules" class="login-form">-->
<!--          <el-form-item prop="username">-->
<!--            <el-input-->
<!--                v-model="form.username"-->
<!--                clearable-->
<!--                placeholder="请输入账号"-->
<!--                prefix-icon="User"-->
<!--            />-->
<!--          </el-form-item>-->
<!--          <el-form-item prop="password">-->
<!--            <el-input-->
<!--                v-model="form.password"-->
<!--                clearable-->
<!--                placeholder="请输入密码"-->
<!--                prefix-icon="Lock"-->
<!--                show-password-->
<!--            />-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-select v-model="form.role" class="role-select" placeholder="请选择角色">-->
<!--              <el-option label="管理员" value="admin"/>-->
<!--              <el-option label="普通用户" value="user"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button-->
<!--                :loading="loading"-->
<!--                class="login-button"-->
<!--                type="primary"-->
<!--                @click="handleLogin"-->
<!--            >-->
<!--              登录-->
<!--            </el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </el-card>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import {reactive, ref} from 'vue';-->
<!--import {Shop} from '@element-plus/icons-vue';-->
<!--import {ElMessage} from 'element-plus';-->

<!--// 表单状态-->
<!--const form = reactive({-->
<!--  username: '',-->
<!--  password: '',-->
<!--  role: 'user'-->
<!--});-->

<!--// 表单验证规则-->
<!--const rules = {-->
<!--  username: [-->
<!--    {required: true, message: '请输入账号', trigger: 'blur'}-->
<!--  ],-->
<!--  password: [-->
<!--    {required: true, message: '请输入密码', trigger: 'blur'},-->
<!--    {min: 6, message: '密码长度不能少于6位', trigger: 'blur'}-->
<!--  ]-->
<!--};-->

<!--// 其他状态-->
<!--const activeTab = ref('login');-->
<!--const formRef = ref(null);-->
<!--const loading = ref(false);-->

<!--// 登录处理-->
<!--const handleLogin = async () => {-->
<!--  try {-->
<!--    await formRef.value.validate();-->
<!--    loading.value = true;-->

<!--    // 模拟登录请求-->
<!--    setTimeout(() => {-->
<!--      loading.value = false;-->
<!--      ElMessage.success('登录成功');-->
<!--      // 实际应用中这里应该进行路由跳转-->
<!--      console.log('登录信息:', form);-->
<!--    }, 1000);-->
<!--  } catch (error) {-->
<!--    console.log('表单验证失败:', error);-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.login-container {-->
<!--  display: flex;-->
<!--  min-height: 100vh;-->
<!--  width: 100%;-->
<!--}-->

<!--.login-image {-->
<!--  flex: 1;-->
<!--  background: linear-gradient(135deg, #e0f7ff 0%, #e1bee7 100%);-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  padding: 20px;-->
<!--}-->

<!--.decorative-img {-->
<!--  max-width: 100%;-->
<!--  max-height: 100%;-->
<!--  object-fit: contain;-->
<!--  border-radius: 10px;-->
<!--  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.login-form-wrapper {-->
<!--  flex: 1;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  padding: 20px;-->
<!--  background-color: #f9fafb;-->
<!--}-->

<!--.logo {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 40px;-->
<!--}-->

<!--.icon {-->
<!--  font-size: 32px;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.title {-->
<!--  font-size: 28px;-->
<!--  font-weight: bold;-->
<!--  color: #333;-->
<!--}-->

<!--.login-card {-->
<!--  width: 100%;-->
<!--  max-width: 400px;-->
<!--  border-radius: 12px;-->
<!--  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);-->
<!--  overflow: hidden;-->
<!--}-->

<!--.tab-container {-->
<!--  padding: 0 20px;-->
<!--}-->

<!--.login-tabs {-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.login-form {-->
<!--  padding: 0 20px 20px;-->
<!--}-->

<!--.role-select {-->
<!--  width: 100%;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.login-button {-->
<!--  width: 100%;-->
<!--  height: 45px;-->
<!--  font-size: 16px;-->
<!--  background-color: #ff7d00;-->
<!--  border-color: #ff7d00;-->
<!--}-->

<!--.login-button:hover {-->
<!--  background-color: #ff6a00;-->
<!--  border-color: #ff6a00;-->
<!--}-->
<!--</style>-->
